<template>
  <div class="width-100 banner">
    <ul class="slides">
      <li v-for="(item, index) in imgList" :key="index">
        <img :src="item" />
      </li>
    </ul>
  </div>
</template>


<script>
import '../utils/jquery.min.js'
import '../utils/flexslider/jquery.flexslider-min'
export default {
  name: 'Banner',
  data() {
    return {
      current: 1,
      imgList: [],
      imgPc: [require('../assets/3.jpeg'), require('../assets/7.jpg')],
      imgPhone: [require('../assets/1.jpeg'), require('../assets/2.jpeg')]
    }
  },
  created() {
    this.imgList = this.imgPc
    if(window.screen.width <= 768) {
      this.imgList = this.imgPhone
    }
  },
  mounted() {
    $(".banner").flexslider({
			slideshowSpeed: 4000, //展示时间间隔ms
			animationSpeed: 800, //滚动时间ms
			touch: true //是否支持触屏滑动
		});
  }
}
</script>

<style>
  @import '../styles/flexslider.min.css';
  .banner {
    position: relative;
    overflow: hidden;
    max-height: 1000px;
  }
  .slides {
    max-height: 1000px;
  }
  .banner img {
    width: 100%;
  }
  .flex-control-nav {
    bottom: 22px;
    z-index: 9;
  }
  .flex-direction-nav {
    z-index: 9;
  }
</style>
